<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>任务</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script th:src="@{/js/jquery.form.js}"></script>
    <style>
        body{
            background-image: url("/img/banner_team.jpg");
            background-position: center;
            background-attachment: fixed;
            overflow-x: hidden;
        }
        .h-center{
            margin: 0 auto;
        }
        .mt-60{
            margin-top: 60px;
        }
        .mt-120{
            margin-top: 120px;
        }
        .mb-60{
            margin-bottom: 60px;
        }
        .mb-120{
            margin-bottom: 120px;
        }
        .content {
            z-index: 1;
        }
        .content:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.8);
            z-index: -1;
            background-image: url("/img/banner_team.jpg");
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
        }
        .content-deep{
            z-index: 1;
        }
        .content-deep:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: -1;
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
        }
        #myTabContentDiv{
            z-index: 1;
            position: absolute;
            top: 42px;
            bottom: 0;
            width: 100%;
        }
        #myTabDiv{
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 42px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#addTaskForm").ajaxForm(function (data) {
                if (data.success) {
                    $("#resultMsg").html("推送任务成功！");
                } else {
                    $("#resultMsg").html(data.errMsg);
                }
                $('#resultModal').modal('show');
            });

            $("#createTaskTeamSelect").change(function () {
                let teamId = $("#createTaskTeamSelect,option:selected").val();
                $("#userTeamsDiv").load("/api/tasks/getTeamUsers/"+teamId);
            });
            $("#processTaskTab").click(function () {
                $("#processTaskPanel").load("/api/tasks/updateView/doingTasks");
            });
            $("#finishedTaskTab").click(function () {
                $("#finishedTaskPanel").load("/api/tasks/updateView/finishedTasks");
            });
            $("#urgentTaskTab").click(function () {
                $("#urgentTaskPanel").load("/api/tasks/updateView/urgentTasks");
            });
        });
    </script>
</head>
<body>
    <div id="myTabDiv" >
        <ul class="nav nav-tabs content-deep" id="myTab" role="tablist" >
            <li class="nav-item">
                <a class="nav-link active" id="createTaskTab" data-toggle="tab" href="#createTaskPanel" role="tab" aria-controls="createTask"  aria-selected="true">发布任务</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="processTaskTab" data-toggle="tab" href="#processTaskPanel" role="tab" aria-controls="processTask" aria-selected="false">进行中</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="finishedTaskTab" data-toggle="tab" href="#finishedTaskPanel" role="tab" aria-controls="finishedTask" aria-selected="false">已完成</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="urgentTaskTab" data-toggle="tab" href="#urgentTaskPanel" role="tab" aria-controls="urgentTask" aria-selected="false">紧急任务</a>
            </li>
        </ul>
    </div>

    <div class="tab-content"  id="myTabContentDiv">
        <div class="tab-pane fade show  active mt-120" id="createTaskPanel" role="tabpanel" aria-labelledby="createTaskTab">
            <div class="card content col-5 h-center">
                <div class="card-body">
                    <h2 class="card-title mb-4">发布任务</h2>
                    <form th:action="@{/api/tasks/add}" method="post" th:object="${addTaskForm}" id="addTaskForm">
                        <div class="form-group">
                            <label for="createTaskContent">任务内容</label>
                            <textarea  class="form-control" placeholder="请输入任务内容"
                                       id="createTaskContent" name="content"></textarea>
                            <small class="form-text" id="createTaskContentLabel"></small>
                        </div>
                        <div class="form-group">
                            <label for="createTaskTeamSelect">选择小组</label>
                            <select class="form-control" id="createTaskTeamSelect" name="teamId">
                                <option th:each="team:${createdTeams}" th:text="${team.name}" th:value="${team.teamId}" name="teamId">1</option>
                            </select>
                        </div>
                        <div class="form-group" id="userTeamsDiv">
                            <label for="createTaskPerson">选择负责人</label>
                            <div th:fragment="teamUsersFragment">
                                <select class="form-control" id="createTaskPerson" name="userId">
                                    <option th:each="user:${teamUsers}" th:text="${user.nickName}" th:value="${user.userId}" name="userId">1</option>
                                </select>
                            </div>

                        </div>
                        <div class="form-group">
                            <label for="createTaskDeadLine">截止日期</label>
                            <input class="form-control" id="createTaskDeadLine" name="deadLine" type="datetime-local">
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"  id="createTaskUrgent" name="urgent" value="true">
                            <label class="form-check-label" for="createTaskUrgent">
                                紧急任务
                            </label>
                        </div>
                        <div class="row col-md-12">
                            <button type="submit" class="btn btn-primary col-md-3" style="margin-top: 20px;" id="createTaskBtn">推送任务
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="tab-pane fade mt-60 mb-120" id="processTaskPanel" role="tabpanel" aria-labelledby="processTaskTab">
            <div th:fragment="doingTasksFragment">
                <div class="d-flex justify-content-start row pl-5" th:each="i:${#numbers.sequence(0, #lists.size(doingTasks)/5)}">
                    <div class="card bg-light mb-3 mr-3 content col-3" style="max-width: 18rem;"
                         th:each="j:${#numbers.sequence(0,3)}" th:if="${#lists.size(doingTasks) gt i*4+j}">
                        <div class="card-header"><strong th:text="'任务'+${i*4+j+1}"></strong>
                            <br>
                            <small><strong>来自 &nbsp;&nbsp;小组:</strong></small><small th:text="${doingTasks[i*4+j].team.name}"></small>
                            <small><strong>&nbsp;&nbsp;组员:</strong></small>&nbsp;&nbsp;<small th:text="${doingTasks[i*4+j].loginUser.nickName}"></small>
                            <br>
                            <small><strong>截止时间</strong></small>&nbsp;&nbsp;<small
                                    th:text="${#dates.format(doingTasks[i*4+j].deadLine, 'yyyy-MM-dd HH:mm:ss')}"></small>
                        </div>
                        <div class="card-body">
                            <p class="card-text" th:text="${doingTasks[i*4+j].content}">With supporting text below as a natural lead-in
                                to additional content.</p>
                            <br>
                            <br>
                            <button  th:value="${doingTasks[i*4+j].taskId}" onclick="urgentTask(this)"  class="btn btn-danger text-white" id="urgentTask">标记为紧急任务</button>
                            <br>
                            <button  th:value="${doingTasks[i*4+j].taskId}" onclick="finishTask(this)"  class="btn btn-success text-white mt-1" id="finishTask">标记为已完成</button>
                        </div>
                    </div>
                </div>
                <script>
                    function finishTask(e) {
                        let taskId = e.value;
                        $.get("/api/tasks/update/finish/"+taskId,function (data) {
                            if (data.success) {
                                $("#resultMsg").html("恭喜，完成一个任务！");
                            }else{
                                $("#resultMsg").html("提交时发生错误！");
                            }
                            $('#resultModal').modal('show');
                            $("#processTaskPanel").load("/api/tasks/updateView/doingTasks");
                        })
                    }
                    function urgentTask(e) {
                        let userInformId =e.value;
                        $.get("/api/tasks/update/urgent/"+userInformId,function (data) {
                            if (data.success) {
                                $("#resultMsg").html("已将任务移到紧急任务！");
                            }else{
                                $("#resultMsg").html("提交时发生错误！");
                            }
                            $('#resultModal').modal('show');
                            $("#processTaskPanel").load("/api/tasks/updateView/doingTasks");
                        });

                    }
                </script>
            </div>
        </div>
        <div class="tab-pane fade mt-60 mb-120" id="finishedTaskPanel" role="tabpanel" aria-labelledby="finishedTaskTab">
            <div th:fragment="finishedTasksFragment">
                <div class="row justify-content-center mb-4" th:each="task:${finishedTasks} ">
                    <div class="col-sm-6 ">
                        <div class="card content">
                            <div class="card-body">
                                <h5 class="card-title" th:text="'任务'+${taskStat.count}">Special title treatment</h5>
                                <small><strong>来自 &nbsp;&nbsp;小组:</strong></small><small th:text="${task.team.name}"></small>
                                <small><strong>&nbsp;&nbsp;组员:</strong></small>&nbsp;&nbsp;<small th:text="${task.loginUser.nickName}"></small>
                                <br>
                                <small><strong>截止时间</strong></small>&nbsp;&nbsp;<small
                                    th:text="${#dates.format(task.deadLine, 'yyyy-MM-dd HH:mm:ss')}"></small>

                                <hr>
                                <p class="card-text" th:text="${task.content}">With supporting text below as a natural
                                    lead-in to additional content.</p>
                                <button   onclick="delTask(this)" th:value="${task.taskId}" class="btn btn-danger">移除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    function delTask(e) {
                        let taskId = e.value;
                        $.get("/api/tasks/update/del/"+taskId,function (data) {
                            if (data.success) {
                                $("#resultMsg").html("已移除！");
                            }else{
                                $("#resultMsg").html("提交时发生错误！");
                            }
                            $('#resultModal').modal('show');
                            $("#finishedTaskPanel").load("/api/tasks/updateView/finishedTasks");
                        })
                    }
                </script>
            </div>
        </div>
        <div class="tab-pane fade mt-60" id="urgentTaskPanel" role="tabpanel" aria-labelledby="urgentTaskTab">
            <div th:fragment="urgentTasksFragment">
                <div class="d-flex justify-content-start row pl-5" th:each="i:${#numbers.sequence(0, #lists.size(urgentTasks)/5)}">
                    <div class="card bg-light mb-3 mr-3 content col-3" style="max-width: 18rem;"
                         th:each="j:${#numbers.sequence(0,3)}" th:if="${#lists.size(urgentTasks) gt i*4+j}">
                        <div class="card-header"><strong th:text="'任务'+${i*4+j+1}"></strong>
                            <br>
                            <small><strong>来自 &nbsp;&nbsp;小组:</strong></small><small th:text="${urgentTasks[i*4+j].team.name}"></small>
                            <small><strong>&nbsp;&nbsp;组员:</strong></small>&nbsp;&nbsp;<small th:text="${urgentTasks[i*4+j].loginUser.nickName}"></small>
                            <br>
                            <small><strong>截止时间</strong></small>&nbsp;&nbsp;<small
                                    th:text="${#dates.format(urgentTasks[i*4+j].deadLine, 'yyyy-MM-dd HH:mm:ss')}"></small>
                        </div>
                        <div class="card-body">
                            <p class="card-text" th:text="${urgentTasks[i*4+j].content}">With supporting text below as a natural lead-in
                                to additional content.</p>
                            <br>
                            <br>
                            <br>
                            <button  th:value="${urgentTasks[i*4+j].taskId}" onclick="finishTask(this)"  class="btn btn-success text-white mt-1" id="finishUrgentTask">标记为已完成</button>
                        </div>
                    </div>

                </div>

                <script>
                    function finishTask(e) {
                        let taskId = e.value;
                        $.get("/api/tasks/update/finish/"+taskId,function (data) {
                            if (data.success) {
                                $("#resultMsg").html("恭喜，完成一个任务！");
                            }else{
                                $("#resultMsg").html("提交时发生错误！");
                            }
                            $('#resultModal').modal('show');
                            $("#urgentTaskPanel").load("/api/tasks/updateView/urgentTasks");
                        })
                    }
                </script>
            </div>
        </div>
    </div>
    <div th:replace="alert :: alertFragment"></div>
</body>
</html>